<template>
  <view class="base-page">
    <globalNavBar title="资讯详情"/>
    <view class="details">
      <view class="title">{{info.title}}</view>
      <view class="time">发布日期：{{ info.time }}</view>
	  <view style="display: flex;    justify-content: center;   flex-wrap: wrap; margin: 30px 0;">
		  <view style="" v-if="info.mp4 != ''"><video :controls="isCTR" :src="info.mp4" ></video></view>
		  <view v-if="info.mp3 != ''"><audio src="info.mp3" controls loop></audio></view>
	  </view>

      <view class="content" v-html="info.content"></view>
    </view>
  </view>
</template>

<script>
	import http from '@/utils/request.js'
export default {
  name: 'newsDetails',
  id : 0,
  onLoad(options) {
	  this.id = options.id;
  	  this.getInfo()
  },
  data() {
    return {
      info: {
        title: '【精彩回顾】淄博市展览馆“趣味科普 乐享百万乐享百万乐享百万乐享百万”',
        time: '2021-08-12 12:00:00',
        content: '这里插入的是资讯详情的富文本内容，具体样式由发布者定义，只做基本样式处理',
		mp4:'',
		mp3:'',
      }
    };
  },
  methods:{
	  getInfo(){
		  var that = this;
		  http.post('api/article/info',{id:that.id}).then(function(data){
		  	that.info.title = data.data.title;
		  	that.info.content = data.data.maincontent
			that.info.time = data.data.addtime_date
			that.info.mp4 = data.data.video_file?http.common.baseUri+data.data.video_file:'';
			that.info.mp3 = data.data.mp3_file?http.common.baseUri+data.data.mp3_file:'';
		  })
	  }
  }
}
</script>

<style lang="scss" scoped>
.details {
  width: calc(100% - 60rpx);
  padding: 0 30rpx;
  .title {
    margin-top: 38rpx;
    width: 100%;
    font-size: 36rpx;
    font-weight: bold;
    color: #333333;
    line-height: 1.5em;
  }
  .time {
    margin-top: 10rpx;
    padding-bottom: 10rpx;
    width: 100%;
    font-size: 28rpx;
    color: #999999;
    line-height: 2em;
    border-bottom: 1px solid #dcdcdc;
  }
  .content {
    width: 100%;
    padding-top: 24rpx;
  }
}
</style>
